<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件参数校验与非props特性</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="root">
<!--        v-bind里面的是JS表达式-->
        <child v-bind:content="'Hello world'"></child>
    </div>

    <script>
        Vue.component("child",{
            props:{
                //props特性
                content:{
                    type:String,
                    // required:false,
                    // default:"default value"
                    validator: function (value) {
                        return (value.length > 5)
                    }
                }
            },
            template:'<div>hello</div>'
        });

        var vm = new Vue({
            el:"#root"
        })
    </script>

</body>
</html>

<!--props属性: dom上不显示，可以使用{{}}-->
<!--非props属性:dom上显示(子组件属性)，不可以使用{{}}-->